<template>
  <div class="box">

    <div class="el" v-for="item, i in list" :key="i">
      <div @click="toGO(item)">
        <img :src="require(`@/assets/initializationHome/${item}.png`)" alt="">
        <span>{{ item }}</span>
      </div>
    </div>


  </div>

</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {


    let logOnUser = JSON.parse(sessionStorage.getItem('logOnUser'))
    console.log(logOnUser, 'logOnUser');
    if (logOnUser.unitType == 'system') {
      this.list = ['用户管理', '小区管理', '车辆管理', '车位管理', '事件管理', '公告发布', '资讯发布', '客户管理']
    } else {
      this.list = ['用户管理', '小区管理', '事件管理', '公告发布', '资讯发布', '客户管理']
    }
  },
  methods: {

    toGO(item) {
      switch (item) {
        case '用户管理':
          this.$router.push(`/user/userManage`)
          break
        case '小区管理':
          this.$router.push(`/residential/reManagement`)
          break
        case '车辆管理':
          this.$router.push(`/car/carManagement`)
          break
        case '车位管理':
          this.$router.push(`/car/carSpaceList`)
          break
        case '事件管理':
          this.$router.push(`/events/eventsManage`)
          break
        case '公告发布':
          this.$router.push(`/webNotice/List`)
          break
        case '资讯发布':
          this.$router.push(`/information/List`)
          break
        case '客户管理':
          this.$router.push(`/customerManag/List`)
          break
      }
    },
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 80%;
  height: 70vh;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .el {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100px;

    >div {
      border-radius: 10px;
      padding: 15px 20px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;

      &:hover {
        background-color: rgba(73, 162, 255, 0.3);
      }

      img {
        width: 12vh;
        height: 12vh;
      }

      span {
        margin-top: 10px;
        font-weight: 600;
        font-size: 3vh;
      }
    }

  }
}
</style>